
/* 
touchstart          手指刚接触屏幕时触发
touchmove           手指在屏幕上移动时触发
touchend            手指从屏幕上移开时触发
touchcancel         一些更高级别的事件发生时（如电话接入或者弹出信息）
                    会取消当前的touch操作，即触发touchcancel。
                    一般会在touchcancel时暂停游戏、存档等操作
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
moveEndX = e.originalEvent.changedTouches[0].pageX;
moveEndY = e.originalEvent.changedTouches[0].pageY;
*/

$.fn.extend({
    myswiper: function () {
        // 初始化
        // 初始化轮播长度
        let _this = this;
        console.log( $(this).find('.swiper-item').outerWidth());
        // 遍历所有子元素宽度
        let _thiswidth = 0; 
        $.each($(this).find('.swiper-item'),function(k,v){
            _thiswidth+=$(v).outerWidth();
        })
        $(this).css('width',_thiswidth);
        this.sroll_el = $(this).data('sroll');


        // 定义范围属性
        this.left_max = parseInt($(this).css("marginLeft"));
        this.left_min = - ( parseInt($(this).css("width")) - 0.95*parseInt($(this.sroll_el).css("width")));

        this.on('touchstart', function (e) {
            e.preventDefault();
            $(_this.sroll_el).find(".swipersroll-item").css({ "display": "block" });
            _this.startX = e.originalEvent.changedTouches[0].pageX;
            _this.startY = e.originalEvent.changedTouches[0].pageY;
            // 更新当前magin值
            _this.mX = parseInt($(this).css("marginLeft"));


        })
        this.on('touchmove', function (e) {
            e.preventDefault();
            if(_this.mX<=_this.left_max && _this.left_min<=_this.mX){
                _this.moveEndX = e.originalEvent.changedTouches[0].pageX;
                _this.moveEndY = e.originalEvent.changedTouches[0].pageY;
                
                
                
                let distance = _this.mX  + (_this.moveEndX - _this.startX);
                distance= ( distance >= _this.left_max )?_this.left_max:distance;
                distance= ( distance <= _this.left_min) ?_this.left_min:distance;
                
                // console.log(_this.mX,_this.left_min);
                // console.log(distance);
                // console.log( distance >= _this.left_max );
                $(this).css({
                    "marginLeft": distance
                })

                // 比例换算。当前滚动轮播移动位置相对最大范围
                   let rote = parseInt(distance)/(_this.left_max -_this.left_min);
                // 滑动条最大移动长度
                let srollmaxX = $(_this.sroll_el).outerWidth()-$(_this.sroll_el)
                                                .find(".swipersroll-item").outerWidth();
                let  srollmaginX= srollmaxX*rote;
                $(_this.sroll_el).find(".swipersroll-item").css({ "marginLeft": -srollmaginX+"px" });

            }
        })
        this.on('touchend', function (e) {
            e.preventDefault();
            $(_this.sroll_el).find(".swipersroll-item").css({ "display": "none" });

            _this.moveEndX = e.originalEvent.changedTouches[0].pageX;
            _this.moveEndY = e.originalEvent.changedTouches[0].pageY;
            _this.startX = e.originalEvent.changedTouches[0].pageX;
            _this.startY = e.originalEvent.changedTouches[0].pageY;
            console.log('end');
        })


    }
})
